Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="registration">
		<h2>LOGIN<br>  
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-people-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
        </svg>
      </h2>
    <form>
        <div class="login">
            <label>Name</label><br>
            <input type="text" id="name"><br><br>
            <label>Password</label><br>
            <input type="Password" id="pass"><br><br>
            <button onclick="login()">Sign In</button>
        </div>
    </form>
    <div class="forget">
        <br><p>Forget password?<a href ="#">SignUp</a></p>
    </div>
  </div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
	background: #e5e5e5;
}
.registration{
	height:470px;
	width:330px;
	border-radius:50px;
	box-shadow:inset 6px 6px 10px gray,inset -8px -8px 10px  white,-8px -8px 10px white, 8px 8px 10px gray;
	background: #e5e5e5;
	margin:40px auto 0px auto;
}
.registration:hover{
	transition: 5s;
	border-radius: 0px;	
}
h2{
	text-align: center;
	padding-top: 20px;
	text-decoration: underline;
	color:rgb(250,0,200);
}
svg{
	width:80px;
	height:40px;
	color:rgb(0,80,250);
}
.login{
	padding:0px 30px;
}
label{
	font-size: 17px;
	font-family: Arial;
	line-height: 2;
}
input{
	width:260px;
	height:23px;
	outline:none;
	border:0px;
	box-shadow: inset 4px 4px 2px gray,inset -6px -6px 7px white;
	background:#e5e5e5;
	border-radius: 20px;
	text-indent: 10px;
	cursor:pointer;
}
button{
	width:160px;
	height:30px;
	margin:24px 0px 0px 55px ;
 	border-radius: 20px;
 	font-weight: bolder;
 	font-family: Arial;
 	color:rgb(180,0,255);
 	outline:none;
 	border:0px;
    box-shadow: 4px 4px 6px gray,-4px 4px 6px white;
}
button:hover{
	box-shadow: inset 4px 4px 6px gray,inset -4px -4px 6px white;
}
.forget{
	margin:2px 70px;
}
p{
	text-align: center;
	font-family: Arial;
	font-size: 14px;
}
a{
	text-decoration: none;
	color:red;
}

Frontend Forever App